<template>
  <view class="biz-container">
    <view v-if="hasLeftTree" class="tree-container" :class="{}">
      <SceneContainerTree
        v-loading="treeLoading"
        class="tree-content"
        ref="sceneTreeRef"
        v-if="hasLeftTree"
        :table-common-attr="filter_tableCommonAttr"
        :table-body-data="filter_tableBodyData"
        :all-btns-emit-form-item-meta-config="filter_allBtnsEmitFormItemMetaConfig"
        :dialog-form-item-dynmic-config-list="
          filter_dialogFormItemDynmicConfigList
        "
        :tool-bar-config="filter_toolBarConfig"
        :operation-btns-config="filter_operationBtnsConfig"
        v-bind="$attrs"
      >
      </SceneContainerTree>
    </view>
    <view
      class="table-container"
      :class="{
        'table-container--with-left-tree': hasLeftTree,
        'table-container--notwith-left-tree': !hasLeftTree,
      }"
    >
      <GdSkeletonContainer
        :loading="tableLoading"
        biz-variant="TableForm"
        :biz-variant-config="table_bizVariantConfig"
        style="height: 100%"
      >
        <template #template>
          <GdSkeletonItem
            variant="rect"
            style="width: 100%"
            :style="{
              height: table_bizVariantConfig.toolbarSkeletonHeight,
              margin: `${table_bizVariantConfig.defaultMargin} 0`,
            }"
          />
          <GdSkeletonItem
            variant="rect"
            style="width: 100%"
            :style="{ height: table_bizVariantConfig.tableSkeletonHeight }"
          />
        </template>
        <template #default>
          <scene-container-table-form
            :table-loading="tableLoading"
            class="table-content"
            ref="tableRef"
            :search-form-common-attr="searchFormCommonAttr"
            :searchFormItemMetaList="searchFormItemMetaList"
            :search-form-data="searchFormData"
            :table-common-attr="tableCommonAttr"
            :table-col-meta-list="tableColMetaList"
            :table-body-data="tableBodyData"
            :tool-bar-config="toolBarConfig"
            :operation-btns-config="operationBtnsConfig"
            :all-btns-emit-form-item-meta-config="allBtnsEmitFormItemMetaConfig"
            :search-form-item-dynmic-config-list="
              searchFormItemDynmicConfigList
            "
            :dialog-form-item-dynmic-config-list="
              dialogFormItemDynmicConfigList
            "
            :table-column-dynmic-config-list="tableColumnDynmicConfigList"
          >
          </scene-container-table-form>
        </template>
      </GdSkeletonContainer>
    </view>
  </view>
</template>
<script>
export default {
  name: "SceneContainerSearchformTablelistSimple",
  inheritAttrs: false,
};
</script>
<script setup>
import {
  ref,
  reactive,
  shallowRef,
  shallowReactive,
  computed,
  getCurrentInstance,
  toRefs,
  watch,
  provide,
  onMounted,
} from "vue";

import SceneContainerTableForm from "@gd-accbuild-ui/scene-container/scene-container-table-form/scene-container-table-form.vue";
import SceneContainerTree from "@gd-accbuild-ui/scene-container/scene-container-tree/scene-container-tree.vue";
import GdSkeletonContainer from "@gd-accbuild-ui/gd-ui/gd-skeleton-container/gd-skeleton-container.vue";
import GdSkeletonItem from "@gd-accbuild-ui/gd-ui/gd-skeleton-container/gd-skeleton-item.vue";
import useSkeletonDynmicTableSize from "./useSkeletonDynmicTableSize";
import { globalConfig } from "@gd-accbuild-core/config";

// scene-container-gen:start

// 树相关
const sceneTreeRef = ref(null);
const hasLeftTree = false;
const treeLoading = false;
const filter_tableCommonAttr = {};
const filter_tableBodyData = [];
// 树的按钮及其弹窗相关
const filter_allBtnsEmitFormItemMetaConfig = {};
const filter_dialogFormItemDynmicConfigList = [];
const filter_toolBarConfig = {};
const filter_operationBtnsConfig = {};

// 主表搜索相关
const searchFormCommonAttr = {};
const searchFormItemMetaList = [];
const searchFormItemDynmicConfigList = [];
const searchFormData = {};
const toolBarConfig = {};

// 主表相关
const tableRef = ref(null);
const tableLoading = false;
const tableCommonAttr = {};
const tableColMetaList = [];
const tableColumnDynmicConfigList = [];
const tableBodyData = [];

// 主表按钮及其弹窗相关
const operationBtnsConfig = {};
const allBtnsEmitFormItemMetaConfig = {};
const dialogFormItemDynmicConfigList = [];

//其它 provider的变量
const crudServiceVmTemplateConfig = { tree: {}, table: {} }; //资源页面中存储的场景容器的所有配置
const tablePageReq = () => {}; //主表场景容器内的getList方法必须用这个
const fillFieldsIntoAddForm = {}; //通常左树右XX 时,左边选中的会自动填充到右边的表单中
const appendFieldsIntoSearchForm = {}; //通常左树右XX 时,左边选中后,右边请求需要传递左边的参数

// scene-container-gen:end

/** 主表元数据刷新的方法 */
const refreshCompMetaDataProxy = computed(() => {
  return tableRef.value.tableFormBoxRef.tableOperationMethods
    .refreshTableMetaData;
});
/** 表格骨架屏参数 */
const table_bizVariantConfig = useSkeletonDynmicTableSize({
  toolBarConfig: toolBarConfig,
  searchFormItemMetaList: searchFormItemMetaList.value,
  tableCommonAttr: tableCommonAttr.value,
});

defineExpose({
  // scene-container-expose:start
  //这里填 您自己需要暴露的变量
  // scene-container-expose:end
  
  /* 默认暴露以下变量 */
  //filter_tableBodyData, //树数据
  //refreshCompMetaDataProxy,//主表元数据刷新方法
  //initMetaAndData, //初始化所有meta和data
});
</script>
<style
  lang="scss"
  scoped
  src="../../../hooks/useCanvasRender/useCanvasRender.scss"
></style>
<style lang="scss" scoped>
.biz-container {
  width: 100%;
  height: 100%;
  display: flex;
}

.tree-container {
  //display:flex;
  width: calc(
    #{$--accbuild-tree-default-width} - #{$--accbuild-default-container-gutter}
  );
  height: 100%;
  //height: calc(100vh - #{$--accbuild-page-top-window-container-height} - #{$--accbuild-page-tags-container-height} - 2 * #{$--accbuild-default-container-gutter});
  margin-right: #{$--accbuild-default-container-gutter};
}

.table-container {
  flex-grow: 1;
  min-width: 0;
  word-break: break-all;
  //width: calc(v-bind("templateContainerAttr.width"));// - (2 * #{$--accbuild-default-container-gutter})
}

.table-container.table-container--with-left-tree {
  width: calc(
    v-bind("templateContainerAttr.width") - #{$--accbuild-tree-default-width} - 2 *
      #{$--accbuild-default-container-gutter}
  );
}

.table-container.table-container--notwith-left-tree {
  width: calc(
    v-bind("templateContainerAttr.width") - 2 * #{$--accbuild-default-container-gutter}
  );
}
</style>
